import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/router/permission'
import 'amfe-flexible'
import './VantRegister'
import directiveObj from '@/utils/directive'
import hljs from 'highlight.js' // hljs对象
import 'highlight.js/styles/default.css' // 代码高亮的样式

// 全局注册

// 自定义组件v-fofo 输入框自动聚焦
Vue.use(directiveObj)
Vue.config.productionTip = false
// 自定义代码高亮
Vue.directive('highlight', function (el) { // 自定义一个代码高亮指令
  const highlight = el.querySelectorAll('pre, code') // 获取里面所有pre或者code标签
  highlight.forEach((block) => {
    hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言)
  })
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// 由于main.js中的代码太多所以将vant组件库分离出去，单独封装一个vant组件库，再将vant组件库引入main.js中

// 目标1: 引入vant组件库, 使用
// 1. 下载vant组件库 (yarn add vant)
// 2. 自动按需引入到工程, 需要一个插件 (yarn add babel-plugin-import -D)
// 3. babel.config.js里, 填入文档上配置(复制) - 重启服务器
// 4. main.js - 引入vant组件 - 全局注册
// 5. 任意.vue组件内, 使用van-开头的全局组件

// 目标2: 移动端适配
// 思路: vant组件库以及我们自己写px单位, 都变成rem
// 1. html的font-size(单位px), 值(flexible.js)
// flexible.js (获取html的宽度 / 10)
// 2. 找一个基准
// 参照iphone6机型来还原我们的设计图
// 375px宽度, 所以iphone6机型下,375/10 -> html的font-size: 37.5px;
// 3. 把除了html以外子标签们, (px单位换成rem单位)
// 例如: 我在iphone6设计图上(1:1), 量出宽度200的图片
// 设置img标签的宽度为200px / 37.5
// (1): 拿计算器
// (2): px to rem插件
// (3): 工程化(yarn管理包, webpack分析编译代码-集成功能)
// webpack+postcss+postcss-pxtorem
// 打包时, 帮我把所有style里(标签里的它不管)px单位, 转成rem单位

// 步骤:
// 1. 下载postcss postcss-pxtorem@5.1.1 amfe-flexible
// 2. postcss.config.js -> 填入文档的配置
// 3. main.js 引入flexible.js
